因為gatsby是基於React,所以在使用上需要會一些React語法,而且了解React也可以讓自己開發起來更有彈性一點(畢竟它都提供了!不用就浪費了,蠻合理的),官網上的教學也都會用到React的基本語法,所以在第二天做個簡單的介紹。
首先我們看到/src/pages/index.js
import React from "react"
export default () => <div>Hello world!</div>
React中使用一種叫做JSX的語法,這種語法類似把HTML寫在js檔裡面,唯有幾個個規則不同於HTML
<img src="#">
就必須寫成<img src="#"/>
才可以import React from "react"
export default () =>
(
<div style={{ color: `purple` }}>
<h1>Hello Gatsby!</h1>
<p>What a world.</p>
</div>
)
此外,我們可以在JSX中允許我們使用描述css樣式的物件來設定style屬性來改變樣式(以上例來講,就是把{ color:
purple }
塞進中括號中),所以和以下程式碼是相同的:
import React from "react"
const divStyle = { color: `purple` };
export default () =>
(
<div style={divStyle}>
<h1>Hello Gatsby!</h1>
<p>What a world.</p>
</div>
)
而在index.js 匯出了一個箭頭函式,並且該函式回傳一個以JSX表示的react元件的物件,這就是會被渲染到我們首頁的內容。
進度和時間關係,所以文章內容應該一次都更新不多。
明天預計更新如何引入其他的react的組件進app.js裡面,和用prop在組件間傳遞資料。
後天利用元件以及元件的函式,來做個很小的功能來做個小總節,React的基本大概就寫這些,畢竟這方面我也不是特別熟悉,所以之後的其他React功能就是用到再去找查了。